<template>
    <v-menu
        ref="menu"
        v-model="menu"
        :close-on-content-click="false"
        :value="value"
        transition="scale-transition"
        offset-y
        max-width="290px"
        min-width="290px"
    >
    <template v-slot:activator="{ on, attrs }">
        <v-text-field
            v-model="time"
            :label="label"
            prepend-inner-icon="mdi-clock-time-four-outline"
            readonly
            v-bind="attrs"
            v-on="on"
            outlined
            dense
            :rules="rules"
        ></v-text-field>
    </template>
    <v-time-picker
        ref="picker"
        v-model="time"
    >
        <v-spacer></v-spacer>
        <v-btn text color="primary" @click="menu = false">Cancel</v-btn>
        <v-btn text color="primary" @click="setDate">OK</v-btn>
    </v-time-picker>
    </v-menu>
</template>
<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
    props: {
        label: {
            type: String,
            default: 'Time',
        },
        value: {
            type: String,
            default: undefined,
        },
        rules: {
        },
    },
    data(): {
        menu: boolean;
        time: string;
        } {
        return {
            menu: false,
            time: this.value ? this.value.substring(0, 5) : '07:00',
        };
    },
    watch: {
        value: {
            handler(val) {
                if (!val) {
                    this.time = '07:00';
                } else {
                    this.time = val.substring(0, 5);
                }
                this.$emit('input', this.time);
            },
        },
    },
    methods: {
        setDate() {
            if (this.time) {
                (this.$refs.menu as any).save(this.time);
                this.$emit('input', this.time);
            }
        },
    },
});
</script>
